<template>
	<div class="outer">
    <headers @back-click="back()" :headers="headers"></headers>
		<scroll :topArea="44" ref="personInfo" :pullDownRefresh="false" :pullUpLoad="false">
  		<div class="content-body" v-if="!passFail && !isLoading">
        <div class="message">请填写您的身份信息，方便我们对您进行租赁信用评估。</div>
        <div class="input-area">
          <div>
            <span>真实姓名:</span>
            <input type="text" placeholder="请输入您的真实姓名" v-model="userInfo.name">
          </div>
          <!-- <div>
            <span>联系电话:</span>
            <input type="text" placeholder="请输入您的电话号码">
          </div> -->
          <div>
            <span>身份证号:</span>
            <input type="text" placeholder="请输入您的身份证号码" v-model="userInfo.certNo">
          </div>
        </div>
        <div class="info">提示: 您的信息只做平台进行信息评估使用，未经您的允许，平台不会泄露给他们。</div>
      </div>
      <div class="fail-info" v-if="passFail && !isLoading">
        <div class="verify-fail">
          <img src="../../assets/img/lease/passFail/not-pass.png" alt="认证失败">
        </div>
        <div class="retry-ask">非常遗憾的通知您，您的信息平台初审未通过，您可以再过段时间后再重新申请试一试。</div>
      </div>
      <div class="credit-loading" v-if="isLoading">
        <img src="../../assets/img/comm/loading.gif" alt="加载图标">
        <div>评估中，请耐心等待</div>
      </div>
  	</scroll>
    <div class="button-area" v-if="!passFail && !isLoading">
      <div class="button"  :class="{'button-confirm': canPost , 'button-disable': !canPost}" @click="confirm()">提交评估</div>
    </div>
	</div>
</template>

<script>
import {checkPriority} from "@/api/homepage.js"
export default {
  name: 'personInfo',
  components: {
  },
  data: function(){
  	return {
      headers: {
        title: "租赁资格评估"
      },
  		userInfo: {
        name: "",
        certNo: ""
      },
      canPost: false,
      isLoading: false,
      passFail: false,
  	}
  },
  methods: {
    back: function(){
      this.$router.go(-1);
    },
    confirm: function(){
      if(!this.canPost){
        return 
      }
      let params = JSON.parse(JSON.stringify(this.userInfo));
      this.isLoading = true;
      checkPriority(params).then( data => {
        this.isLoading = false;
        if(data.code == 200){
          if(data.data.isAdmittance == "Y"){
            this.passFail = false;
             this.$router.push({name:'orderPage'});
          }else {
            this.passFail = true;
          }
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
          this.passFail = true;
        }
      })
    }
  },
  watch: {
    userInfo: {
      handler: function(newVal,oldVal){
        if(newVal.name && newVal.certNo){
          this.canPost = true;
        }else {
          this.canPost = false;
        }
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
	.outer {
		height: 100%;
    	width: 100%;
    	position: absolute;
	}
.content-body {
  margin-top: 5px;
  background: #fff;
  padding: 0 16px;
  .message {
    height: 37px;
    line-height: 37px;
    font-size: 12px;
    color: #333;
  }
  .input-area {
    border: 1px solid rgba(105,174,255,0.3);
    border-radius: 5px;
    padding: 0 16px;
    margin-bottom: 16px;
    &>div {
      height: 39px;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      &:not(:last-child){
        border-bottom: 1px solid #eee;
      }
      &>span {
        width: 72px;
        font-size: 11px;
        color: #666;
      }
      &>input {
        width: 238px;
        font-size: 11px;
      }
    }
  };
  .info {
    width: 100%;
    font-size: 12px;
    color: #999;
    padding-bottom: 18px;
  }
}
.fail-info {
  width: 100%;
  height: 100%;
  &>div.retry-ask {
    width: 264px;
    margin: 0 auto;
    margin-top: 57px;
    color: #999;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
  }
}

  .verify-fail {
    width: 129px;
    height:  129px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: violet;
    border-radius: 50%;
    margin: 0 auto;
    margin-top: 119px;
    background: #eee;
    &>img {
      margin: 0 auto;
      width: 69px;
      height: 69px;
    }
  }
.credit-loading {
  width: 100%;
  height: 100%;
  &>img {
    display: block;
    margin: 0 auto;
    margin-top: 83px;
    text-align: center;
    width: 51px;
    height: 51px;
  }
  &>div {
    width: 100%;
    margin-top: 57px;
    text-align: center;
    font-size: 16px;
    color: #999;
  }
}
.button-area {
  height: 49px;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 300;
  padding: 0 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  &>div {
    width: 100%;
  }
}
</style>